import React from 'react';
import ImageLazy from '../../commons/ImageLazy';
import NavLink from '../../commons/NavLink';
import NoList from '../../commons/No_List';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router';
import {get_order_classify,get_order_classify_more} from '../../../actions';
import {getHosImg,getDocImg,getServImg} from '../../../actions/ActionTypes';
const user_dele = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../../static/img/user_dele.png');

class mydefault extends React.Component{
  constructor(props){
   super(props);
   // ES6 类中函数必须手动绑定
   this._loadMore = this._loadMore.bind(this);

   this.state = {
     pageCount:1
   }
 }
 _loadMore() {
   let {dispatch} = this.props;
   this.setState({
     pageCount:++this.state.pageCount
   })
   dispatch(get_order_classify_more({user_id:this.props.userId,page:this.state.pageCount},function(){
     $('.load_more').text('没有更多了')
   }));
 }

 _test_emp_more(){
   if($('.item_wrapper .item').length == 0){
     $('.prompt').fadeIn();
   }else{
     $('.prompt').hide();
   }

   if($('.item_wrapper .item').length >= 10){
     $('.load_more').fadeIn();
   }else{
     $('.load_more').hide();
   }
 }

  componentDidMount(){
    let {dispatch} = this.props;
    dispatch(get_order_classify({user_id:this.props.userId}));

    //
    this._test_emp_more();
  }

  componentDidUpdate(){
    this._test_emp_more();
  }

  render(){
    let allorder = this.props.get_order_classify || [];
    // this.filterSome(consumed_arr,consumed_arr_obj,consumed_arr_obj_sn,allorder,'3');

    return(
      <div className="userOrder_classify">
        <NoList />
          <div className="item_wrapper">
          {
            allorder.map(function(item,index){
              let this_unionSN = '';
              let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId);

              if(item.orderState == 1){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <div style={{"display":"none"}}>{this_unionSN=item.unionSN}</div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="wrapper">
                        <div className="left">◆ 等待付款<small>(剩余{Math.abs(item.countTime)}小时自动关闭)</small></div>
                        <div className="right">
                          <NavLink to={"/user/pay/"+item.unionSN} className="pays">付款</NavLink>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 2){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <div style={{"display":"none"}}>{this_unionSN=item.unionSN}</div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="wrapper">
                        <div className="left">◆ 未付款已失效</div>
                        <div className="right">
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 3){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <div style={{"display":"none"}}>{this_unionSN=item.unionSN}</div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="order_number border_b1"><span>订单编号</span><em>{item.orderSN}</em></div>
                      <div className="wrapper">
                        <div className="left"></div>
                        <div className="right">
                          <NavLink to={"/user/applyRefund/" + item.unionSN} className="pays">申请退款</NavLink>
                          <a href={"tel:" + item.doctorMobile} className="pays">联系医生</a>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 4){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <div style={{"display":"none"}}>{this_unionSN=item.unionSN}</div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="wrapper">
                        <div className="left">◆ 未消费已失效</div>
                        <div className="right">
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 5){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="wrapper">
                        <div className="left">◆ 已消费<small>(消费时间2016.11.25)</small></div>
                        <div className="right">
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 6){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}
                          </div>
                        </div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="order_number border_b1"><span>订单编号</span><em>{item.orderSN}</em></div>
                      <div className="wrapper">
                        <div className="left"></div>
                        <div className="right">
                          <a href="javascript:void(0)">退款处理中</a>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 7){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}
                          </div>
                        </div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="order_number border_b1"><span>订单编号</span><em>{item.orderSN}</em></div>
                      <div className="wrapper">
                        <div className="left"></div>
                        <div className="right">
                          <a href="javascript:void(0)">退款处理中</a>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 8){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="order_number border_b1"><span>订单编号</span><em>{item.orderSN}</em></div>
                      <div className="wrapper">
                        <div className="left"></div>
                        <div className="right">
                          <a href="javascript:void(0)">拒绝退款</a>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 9){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}
                          </div>
                        </div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="order_number border_b1"><span>订单编号</span><em>{item.orderSN}</em></div>
                      <div className="wrapper">
                        <div className="left"></div>
                        <div className="right">
                          <a href="javascript:void(0)">退款成功</a>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }

              if(item.orderState == 10){
                return(
                  <div>
                    <NavLink to={"/user/order/detail/" + item.unionSN} className="item border_b1">
                      <div className="wrapper clearfix">
                        <em className="checks"><var></var></em>
                        <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                        <div className="mid">
                          {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                          <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                          <div>
                            医院：{item.hospitalName}<br/>
                          </div>
                        </div>
                        <h5>预约金：¥ {item.itemPrice}</h5>
                        <div className="num">×{item.itemNum}</div>
                      </div>
                    </NavLink>
                    <div className="status border_b1">
                      <div className="wrapper">
                        <div className="left">◆ 支付失败？？<small></small></div>
                        <div className="right">
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }
            })
          }
          <div className="load_more" onClick={this._loadMore}>点击加载更多...</div>
          </div>
      </div>
    )
  }
}

let mapStateToProps = (state) =>{
  let userId = state.user.userId,
    get_order_classify = state.user.get_order_classify;
  return{
    userId,
    get_order_classify
  }
}

export default connect(mapStateToProps)(mydefault);
